"use client";

import { useEffect, useState } from "react";

import { useParams } from "next/navigation";

import Link from "next/link";

import { api, downloadAuthed, EvidenceDetail } from "@/lib/api";

export default function EvidenceViewer() {

  const { id } = useParams<{ id: string }>();

  const [ev, setEv] = useState<EvidenceDetail | null>(null);

  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {

    api.evidenceDetail(id)

      .then(setEv)

      .catch((e) => setErr(e.status === 401 ? "Sign in to view evidence." : "Evidence not found."));

  }, [id]);

  if (err) return <div className="badge danger">{err}</div>;

  if (!ev) return <div className="muted">Loading…</div>;

  const isImage = (ev.content_type || "").startsWith("image/");

  return (

    <div>

      <h1>{ev.filename}</h1>

      <p className="muted">

        Evidence in <Link href={`/investigations/${ev.investigation_id}`}>investigation {ev.investigation_id.slice(0, 8)}</Link>

      </p>

      <div className="grid">

        <div className="card"><div className="muted">Type</div><div>{ev.content_type || "unknown"}</div></div>

        <div className="card"><div className="muted">Size</div><div>{(ev.size_bytes / 1024).toFixed(1)} KB</div></div>

        <div className="card"><div className="muted">Uploaded</div><div>{new Date(ev.created_at).toLocaleString()}</div></div>

        <div className="card"><div className="muted">Source</div><div>{ev.source_id ? ev.source_id.slice(0, 8) : "-"}</div></div>

      </div>

      <h2>Integrity</h2>

      <div className="card">

        <div className="muted">SHA-256</div>

        <div style={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}>{ev.sha256}</div>

        <div style={{ marginTop: 10 }}>

          <button className="primary" onClick={() => downloadAuthed(`/evidence/${ev.id}/download`, ev.filename)}>

            Download (integrity-checked)

          </button>

        </div>

        {ev.description && <p className="muted" style={{ marginTop: 10 }}>{ev.description}</p>}

      </div>

      {isImage && (

        <>

          <h2>Preview</h2>

          <div className="card muted">Image preview requires an authenticated blob fetch - use Download above.</div>

        </>

      )}

      <h2>Chain of custody</h2>

      <div className="card">

        <table>

          <thead><tr><th>When</th><th>Action</th><th>Actor</th><th>Detail</th></tr></thead>

          <tbody>

            {ev.chain_of_custody.map((c, i) => (

              <tr key={i}>

                <td className="muted" style={{ whiteSpace: "nowrap" }}>{new Date(c.at).toLocaleString()}</td>

                <td><span className="badge">{c.action}</span></td>

                <td className="muted">{c.actor ? c.actor.slice(0, 8) : "-"}</td>

                <td className="muted" style={{ fontSize: 12 }}>{c.metadata ? JSON.stringify(c.metadata) : "-"}</td>

              </tr>

            ))}

            {!ev.chain_of_custody.length && <tr><td colSpan={4} className="muted">No custody events.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}